import React, { Component, useEffect, useState } from 'react';
import { GithubOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme, Select, Input, DatePicker, Space, Button, Image } from 'antd';
import { useHistory, useParams } from 'react-router-dom';
import service from '../../../utils/service';





function Report() {

    interface item {
        name: string,
        time: string,
        type: string,
        address: string,
        desc: string,
        name1: string
    }
    const [item, setitem] = useState<item>()
    useEffect(() => {
        service({
            url: `http://localhost:3000/shenheList/${id}`
        }).then(res => {
            setitem(res.data)
        })
    })
    let params = useParams();
    let history = useHistory()
    const { id } = useParams<{ id: any }>();

    const ret = () => {
        history.push('/Main/dangerManagement')
    }
    return (

        <>
            <div style={{ background: '#ededed' }}>
                <div style={{ border: '1px solid #f2f2f2', height: '90px', }}>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <p> <GithubOutlined style={{ fontSize: '50px', margin: '10px 10px 0px 10px' }} />   </p>
                        <span>{item?.name1}</span>
                    </div>
                    <div style={{ marginLeft: '68px', color: '#aaa' }}>
                        <span>上报时间：{item?.time}</span>
                        <span>结束时间:</span>
                    </div>
                </div>
                <p style={{ margin: '5px 0px 0px 15px', color: '#1890ff', fontSize: '17px' }}>隐患类型：{item?.type}</p>
                <p style={{ margin: '5px 0px 0px 15px', }}>隐患地点：{item?.address}</p>
                <p style={{ margin: '5px 0px 5px 15px', }}>隐患描述：{item?.desc}</p>
                <div>
                    <Image
                        style={{ marginLeft: '10px' }}
                        width={100}
                        height={100}
                        src="error"
                        fallback=""
                    />
                    <Image
                        style={{ margin: '0px 10px ' }}

                        width={100}
                        height={100}
                        src="error"
                        fallback=""
                    />
                    <Image

                        width={100}
                        height={100}
                        src="error"
                        fallback=""
                    />
                </div>
            </div>

            <div style={{ marginTop: '20px', background: '#ededed' }}>
                <div style={{ height: '50px', lineHeight: '50px', fontWeight: 'bolder', fontSize: '19px', borderBottom: '3px solid #999' }}>
                    处理进程
                </div>
                <div style={{ position: 'relative' }}>
                    <div style={{ width: '900px', height: '300px', background: '#fff', marginLeft: '160px', marginTop: "50px", position: 'relative' }}>
                        <div style={{ width: '900px', height: '100px', borderBottom: '1px solid #999', fontSize: '18px' }}>
                            <p> <GithubOutlined style={{ fontSize: '50px', margin: '10px 10px 0px 10px' }} />  {item?.name1} <span style={{ color: 'green' }}> (上报成功)</span>  </p>
                        </div>
                        <div>
                            <p style={{ margin: '5px 0px 0px 15px', color: '#1890ff', fontSize: '17px' }}>隐患类型：{item?.type}</p>
                            <p style={{ margin: '5px 0px 0px 15px', }}>隐患地点：{item?.address}</p>
                            <p style={{ margin: '5px 0px 5px 15px', }}>隐患描述：{item?.desc}</p>
                            <div>
                                <Image
                                    style={{ marginLeft: '10px' }}
                                    width={100}
                                    height={100}
                                    src="error"
                                    fallback=""
                                />
                                <Image
                                    style={{ margin: '0px 10px ' }}

                                    width={100}
                                    height={100}
                                    src="error"
                                    fallback=""
                                />
                                <Image

                                    width={100}
                                    height={100}
                                    src="error"
                                    fallback=""
                                />
                            </div>
                        </div>
                        <div style={{ background: 'orange', width: '150px', height: '150px', borderRadius: '50%', textAlign: 'center', lineHeight: '150px', position: 'absolute', right: '50px', bottom: '30px', fontSize: '25px', color: '#FFF', transform: 'rotate(315deg)' }}>
                            最新进度
                        </div>
                    </div>
                    <div style={{ background: 'green', borderRadius: '50%', width: '50px', height: '50px', lineHeight: '50px', textAlign: 'center', position: 'absolute', top: '10px', left: '10px', color: '#FFF', }}>
                        上报
                    </div>
                </div>
            </div>


            <Button type="primary" onClick={ret}>返回</Button>









        </>);
}

export default Report;